<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/tool.js"></script>
    <style>
        .input-group {
            margin-bottom: 10px;
        }

        .createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="form">
        <div class="input-group">
            <lable>用户名:</lable>
            <input type="text" class="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <lable>密&emsp;码:</lable>
            <input type="text" class="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <lable>手机号:</lable>
            <input type="text" class="phone">
            <span class="phone_tips"></span>
        </div>
        <div class="input-group">
            <lable>邮&emsp;箱:</lable>
            <input type="text" class="email">
            <span class="email_tips"></span>
        </div>
        <div class="input-group">
            <lable>验证码:</lable>
            <input type="text" class="code">
            <span class="createCode">xy1d</span>
            <span class="code_tips"></span>
        </div>

        <div class="input-group">
            <input type="submit" class="btn" value="注册">
            <input type="reset" class="btn" value="取消">
        </div>
    </div>
</body>
<script>
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头
    
    // 密码
    // 由数字 字母 _ 组成, 6-12位 
    // 密码强度
    // 如果 数字 大写字母 小写字母 _ 中只出现一种  弱   aaaaaa  111111 AAAAAA
    // 如果 数字 大写字母 小写字母 _ 中只出现两种  中   aaa111  AAA111 aaaAAA
    // 如果 数字 大写字母 小写字母 _ 中只出现三种  强   aaaAAA111  aaa111_  aaaAAA_
    // 如果 数字 大写字母 小写字母 _ 中只出现四种  超强 aaaAAA111_ 

    // 提升:  true + true + true + false = 3 

    // 确认密码 -> 密码成功的前提下,和密码保持一致

    // 验证码:  随机的验证码 和 用户输入的保持一直

    // 随机验证码
    // 随机验证码  => 从数字 大小写字母  中随机四位验证码  (不强制要求 a. 没有重复  b.数字 大写 小写 都要出现至少依次   )
    // 1. 页面加载时 => 随机验证码
    // 2. 点击切换验证码

</script>
<script type="module">
    // import { ajax,request } from "../js/ajax.js";
    import {isExistUser,register} from "../js/api.js";

    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头

    // 安装从易到难的顺序:
    // a. 6-12位   /^.{6,12}$/
    // b. 切不能以数字开头   /^[^0-9]/
    // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符    /[\w]/  => 存在合法字符      /[^\w]/  => 是否存在合法字符    

    // 1. 简易失焦时分开验证

    // 2. 针对用户名 写两种:  1. 一步到位   2. 分开验证



    var userInp = document.getElementsByClassName("user")[0];
    var userTips = document.getElementsByClassName("user_tips")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdTips = document.getElementsByClassName("pwd_tips")[0];

    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneTips = document.getElementsByClassName("phone_tips")[0];

    var emailInp = document.getElementsByClassName("email")[0];
    var emailTips = document.getElementsByClassName("email_tips")[0];

    var codeInp = document.getElementsByClassName("code")[0];
    var codeTips = document.getElementsByClassName("code_tips")[0];

    var createCodeSpan = document.getElementsByClassName("createCode")[0];

    var btn = document.getElementsByClassName("btn")[0];

    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;
    var isCodeOk = false;

    createCodeSpan.innerText = randCode();
    createCodeSpan.onclick = function () {
        createCodeSpan.innerText = randCode();
    }

    // 一步到位版 -> 只会告诉你你错了,但是不会告诉你哪错了
    /*  userInp.onchange = function(){
         var user = userInp.value;
 
         var spaceReg = /\s/g;
         user = user.replace(spaceReg,"");
         userInp.value = user;
 
         // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头
         var reg = /^[a-zA-Z_]\w{5,11}$/;
 
         if(reg.test(user)){
             userTips.textContent = "√";
             // userTips.style.fontSize = "12px";
             // userTips.style.color = "green";
 
             // userTips.classList.remove("error");
             // userTips.classList.add("right");
 
             userTips.className = "user_tips right";
             
         }else{
             userTips.textContent = "用户名由数字、字母、下划线组成,6-12位,且不能以数字开头";
             // userTips.style.fontSize = "12px";
             // userTips.style.color = "red";
             
             // userTips.classList.remove("right");
             // userTips.classList.add("error");
 
             userTips.className = "user_tips error";
         }
 
     } */


    // 分步验证:
    // 按照从易到难的顺序:
    // a. 6-12位            /^.{6,12}$/
    // b. 切不能以数字开头   /^[^0-9]/
    // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符    /[\w]/  => 存在合法字符      /[^\w]/  => 是否存在合法字符 

    userInp.onchange = function () {
        var user = userInp.value;

        isUserOk = false;

        var spaceReg = /\s/g;
        user = user.replace(spaceReg, "");
        userInp.value = user;

        var lenReg = /^.{6,12}$/; // 任意字符6-12个
        var startReg = /^[^0-9]/; // 非数字开头
        var illegalReg = /[^\w]/; // 存在非法字符 

        if (!lenReg.test(user)) {  //长度有误
            userTips.textContent = "用户名需要在6-12位之间";
            userTips.className = "user_tips error";
        } else if (!startReg.test(user)) { // 开头有误
            userTips.textContent = "用户名不能以数字开头";
            userTips.className = "user_tips error";
        } else if (!!illegalReg.test(user)) { // 有非法字符
            userTips.textContent = "用户名由数字、字母、下划线组成";
            userTips.className = "user_tips error";
        } else {

            // request({
            //     type:"get",
            //     url:"http://43.138.81.225/demo/php/isExistUser.php",
            //     data:{
            //         user:user
            //     },
            //     dataType:"json",
            // }).then(result =>{
            //     var { status, message } = result;

            //     if (status) {
            //         userTips.textContent = "√";
            //         userTips.className = "user_tips right";
            //         isUserOk = true;
            //     } else {
            //         userTips.textContent = "该用户已被注册";
            //         userTips.className = "user_tips error";
            //     }

            // }).catch(err =>{
            //     throw err;
            // })

            isExistUser({user:user}).then(result => {
                var { status, message } = result;

                if (status) {
                    userTips.textContent = "√";
                    userTips.className = "user_tips right";
                    isUserOk = true;
                } else {
                    userTips.textContent = "该用户已被注册";
                    userTips.className = "user_tips error";
                }

            }).catch(err =>{
                throw err;
            })

            


           

           
        }

    }

    pwdInp.onchange = function () {
        var pwd = pwdInp.value;

        isPwdOk = false;

        var spaceReg = /\s/g;
        pwd = pwd.replace(spaceReg, "");
        pwdInp.value = pwd;

        var reg = /^\w{6,12}$/;

        if (reg.test(pwd)) {


            // 密码强度
            // 如果 数字 大写字母 小写字母 _ 中只出现一种  弱   aaaaaa  111111 AAAAAA
            // 如果 数字 大写字母 小写字母 _ 中只出现两种  中   aaa111  AAA111 aaaAAA
            // 如果 数字 大写字母 小写字母 _ 中只出现三种  强   aaaAAA111  aaa111_  aaaAAA_
            // 如果 数字 大写字母 小写字母 _ 中只出现四种  超强 aaaAAA111_ 

            var isExistNum = /[0-9]/.test(pwd);
            var isExistBig = /[A-Z]/.test(pwd);
            var isExistSmall = /[a-z]/.test(pwd);
            var isExistSpe = /[_]/.test(pwd);

            var level = isExistNum + isExistBig + isExistSmall + isExistSpe;

            switch (level) {
                case 1: pwdTips.textContent = "密码强度:弱"; break;
                case 2: pwdTips.textContent = "密码强度:中"; break;
                case 3: pwdTips.textContent = "密码强度:强"; break;
                case 4: pwdTips.textContent = "密码强度:超强"; break;
            }

            pwdTips.className = "pwd_tips right";




            isPwdOk = true;

        } else {
            pwdTips.textContent = "密码由数字、字母、下划线组成,6-12位";
            pwdTips.className = "pwd_tips error";
        }
    }



    phoneInp.onchange = function () {
        var phone = phoneInp.value;

        isPhoneOk = false;

        var spaceReg = /\s/g;
        phone = phone.replace(spaceReg, "");
        phoneInp.value = phone;

        var reg = /^1[3-9]\d{9}$/;

        if (reg.test(phone)) {
         


            var xhr = new XMLHttpRequest();

            xhr.open("get", "http://43.138.81.225/demo/php/isExistPhone.php?phone=" + phone, true)

            xhr.send();

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;

                    result = JSON.parse(result);
                    console.log(result);

                    var { status, message } = result;

                    if (status) {
                        phoneTips.textContent = "√";
                        phoneTips.className = "phone_tips right";
                        isPhoneOk = true;
                    } else {
                        phoneTips.textContent = "手机号已被注册";
                        phoneTips.className = "phone_tips error";
                    }



                }


            }



        } else {
            phoneTips.textContent = "手机号格式有误";
            phoneTips.className = "phone_tips error";
        }
    }


    emailInp.onchange = function () {
        var email = emailInp.value;

        isEmailOk = false;

        var spaceReg = /\s/g;
        email = email.replace(spaceReg, "");
        emailInp.value = email;

        var reg = /^[a-zA-Z]\w{5,17}@(qq|163|126|gmail|outlook|\w+)\.com$/;

        if (reg.test(email)) {
            // emailTips.textContent = "√";
            // emailTips.className = "email_tips right";
            // isEmailOk = true;


            var xhr = new XMLHttpRequest();

            xhr.open("get", "http://43.138.81.225/demo/php/isExistEmail.php?email=" + email, true)

            xhr.send();

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;

                    result = JSON.parse(result);
                    console.log(result);

                    var { status, message } = result;

                    if (status) {
                        emailTips.textContent = "√";
                        emailTips.className = "email_tips right";
                        isEmailOk = true;
                    } else {
                        emailTips.textContent = "邮箱已被注册";
                        emailTips.className = "email_tips error";
                    }



                }


            }
        } else {
            emailTips.textContent = "邮箱格式有误";
            emailTips.className = "email_tips error";
        }
    }


    codeInp.onchange = function () {
        var code = codeInp.value;

        isCodeOk = false;

        var spaceReg = /\s/g;
        code = code.replace(spaceReg, "");
        codeInp.value = code;

        // 将随机的验证码 改为正则表达式  => 验证用户输入的验证码
        var randStr = createCodeSpan.innerText; // 取出随机的验证码
        // var reg = new RegExp(`^${randStr}$`,"i");  // new RegExp("^F96k$","i") => /^F96k$/i
        var reg = new RegExp("^" + randStr + "$", "i");  // new RegExp("^F96k$","i") => /^F96k$/i

        if (reg.test(code)) {
            codeTips.textContent = "√";
            codeTips.className = "code_tips right";

            isCodeOk = true;
        } else {
            codeTips.textContent = "验证码有误";
            codeTips.className = "code_tips error";
        }
    }


    btn.onclick = function () {
        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk && isCodeOk) {

            // 需要提交的数据
            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;


            /* ajax({
                type:"post",
                url:"http://43.138.81.225/demo/php/register.php",
                data:{
                    user:user,
                    pwd,
                    phone,
                    email,
                },
                dataType:"json",
                success:function(result){
                    var { status, message } = result;

                    if (status) {
                        location.href = "./login.html";
                    } else {
                        alert(message);

                    }
                }
            })*/
            

            // request({
            //     type: "post",
            //     url: "http://43.138.81.225/demo/php/register.php",
            //     data: {
            //         user: user,
            //         pwd,
            //         phone,
            //         email,
            //     },
            //     dataType: "json",

            // }).then(result=>{
            //     var { status, message } = result;

            //     if (status) {
            //         location.href = "./login.html";
            //     } else {
            //         alert(message);
            //     }
                
            // }).catch(err=>{
            //     throw err;
            // })


            register({user,pwd,phone,email}).then(result => {
                var { status, message } = result;

                if (status) {
                    location.href = "./login.html";
                } else {
                    alert(message);
                }

            }).catch(err => {
                throw err;
            })






        } else {
            alert("注册信息有误");
        }
    }

</script>

</html>